<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入主题样式 -->
<link href="themes/gray/easyui.css" rel="stylesheet">
<!-- 引入图标的样式 -->
<link href="themes/icon.css" rel="stylesheet">
<!-- 先引入jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/Chart.js"></script>
<!-- 引入easyui -->
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body style="background: #eee;">
	<div class="container">
		<div align="center"
			style="width: 400px; height: 400px; position: fixed; left: 0px; top: 0px;">
			<h2>网站信息比例</h2>
			<canvas id="myChart" width="400" height="400"></canvas>
		</div>
		<br> <br>
		<div class="row">
			<div class="col-xs-12">
				<div style="width: 100%; height: 700px; background: #eee;"
					align="center">
					<br>
					<div id="earth"
						style="width: 800px; height: 800px; border-radius: 50%; overflow: hidden;">
						<img src="picture/north.jpg" style="opacity: 0.1;">
					</div>
					<div style="width: 100%; height: 200px;"></div>
					<div
						style="width: 100%; height: 800px; position: absolute; top: 3%; left: 0%;">
						<div style="margin-top: 3%; margin-left: 3%;">
							<span style="font-size: 60px;">环保知识管理系统</span>
						</div>
						<div style="margin-top: 10%; margin-left: 3%;">
							<span style="font-size: 30px"><a id="item1"
								href="main.jsp" style="color: blue;">环境知识管理</a></span>
						</div>
						<div style="margin-top: 3%; margin-left: 3%;">
							<span style="font-size: 30px"><a id="item2"
								href="javascript:void(0)" onClick="javascript:trad()"
								style="color: blue;">行业动态设置</a></span>
						</div>
						<div style="margin-top: 3%; margin-left: 3%;">
							<span style="font-size: 30px"><a id="item3"
								href="javascript:void(0)" onclick="addweb()"
								style="color: blue;">推荐网站配置</a></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="settrad" align="center">
			<form action="addcontent" method="post">
				<div style="margin-top: 5%;">
					知识标题:<input type="text" class="easyui-textbox" style="width: 300;"
						name="title">
				</div>
				<div style="margin-top: 3%">
					知识摘要:<input type="text" class="easyui-textbox" style="width: 300:"
						name="abstract">
				</div>
				<div style="margin-top: 3%">
					所属类型:<input id="type" class="easyui-combobox" name="type"
						style="width: 300;">
				</div>
				<div style="margin-top: 3%">
					知识内容:<input id="file" type="file" onchange="import1()"
						style="width: 300;"> <input id="content" type="hidden"
						name="files" value="">
				</div>
				<div style="margin-top: 3%">
					所属专题:<input type="text" name="special" style="width: 300;">
				</div>
				<div style="margin-top: 3%">
					<button type="submit">确认</button>
				</div>
			</form>
		</div>
		<div id="addweb" align="center">
			<div id="webbox" align="center"
				style="margin-top: 10%; display: none;">
				网站名:<input id="web" type="text" class="easyui-textbox"
					style="width: 200px; display: none;">
			</div>
			<div id="sitebox" align="center"
				style="margin-top: 10%; display: none;">
				地址：<input id="site" type="text" class="easyui-textbox"
					style="width: 200px; display: none;">
			</div>
		</div>
	</div>
	<div id="socket" onmouseout="reduceHeight()" onmouseover="addHeight()"
		style="overflow: hidden; width: 20px; height: 400px; position: fixed;
		 right: 0px; top: 0px; border: 1px solid;background-color: white;
		 border-radius:20px; ">
		<div align="center">
			<h2>通知</h2>
		</div>
		<hr>
		<ul id="person"></ul>
	</div>
	<script type="text/javascript">
		$(function() {
			var ctx = document.getElementById("myChart").getContext("2d");
			var myChart = new Chart(ctx,
					{
						type : 'doughnut',
						backgroundColor: "rgba(75,192,192,0.4)",
						borderColor: "rgba(75,192,192,1)",
						data : {
							labels : [ "政策法规", "环保标准", "环保业务", "环保培训"],
							datasets : [ {
								data : [${data}],
								backgroundColor: [
									                'rgba(255,99,132,1)',
									                'rgba(54, 162, 235, 1)',
									                'rgba(255, 206, 86, 1)',
									                'rgba(255, 159, 64, 1)'
									            ],
							}],
						    borderWidth: 1
						}
					});
			
			var i = 0;
			setInterval(function() {
				$("#earth").css({
					transform : "rotate(" + i + "deg)"
				})
				i = i + 0.1;
				if (i > 360) {
					i = 0;
				}
			}, 10)

			$("#settrad").window({
				width : 600,
				height : 500,
			})
			$("#settrad").window("close");
			
			$("#type").combobox({
				url:'getMaxNumerContent',
				valueField:'id',
				textField:'text'
			})
			
		})

		function trad() {
			$.ajax({
				url : 'getMaxNumerContent',
				type : 'post',
				success : function() {
					$("#settrad").window('open');
				}
			})
		}
		
		function import1(){
			var selectFile = document.getElementById("file").files[0];
			var reader = new FileReader();
			var text = reader.readAsText(selectFile);
			reader.onload = function(){
				document.getElementById("content").value=this.result;
			}
		}
		
		function addweb(){
			$("#addweb").dialog({
				title:'请添加新网站',
				width:300,
				height:200,
				collapsible: true,   
                minimizable: true,   
                maximizable: true, 
				buttons:[{
					text:'确认',
					handler:function(){
						var web = $("#web").val();
						var site = $("#site").val();
						$.ajax({
							url:'addweb',
							data:{"web":web,"site":site},
							type:'post',
							success:function(){
								
							}
						})
						$("#addweb").dialog('close')
					}
				},{
					text:'取消',
					handler:function(){
						$("#addweb").dialog('close')
					}
				}]
			})
			$("#addweb").show();
			$("#webbox").show();
			$("#sitebox").show();
		}

		$(function(){
			var i = 1;
			var ws = new WebSocket("ws://172.18.23.232:8080/System4/socket");
			ws.onmessage = function(e){
				if(i>9){
					$("#"+(i-9)).remove();
				}
				$("#person").append("<li id='"+i+"'>"+e.data+"</li>");
				i++;
			}
		})

		function reduceHeight(){
			$("#socket").css({width:"20px"});
		}
		function addHeight(){
			$("#socket").css({width:"400px"});
		}
	</script>
</body>
</html>
